<template>
  <el-menu
    :default-active="activeMenu"
    class="sidebar-menu"
    background-color="#f5f5f5"
    text-color="#333"
    active-text-color="#1890ff"
    :unique-opened="true"
    router
  >
    <!-- 首页 -->
    <el-menu-item index="/home">
      <el-icon><House /></el-icon>
      <span>首页</span>
    </el-menu-item>

    <!-- 线索管理 -->
    <el-sub-menu index="/clue">
      <template #title>
        <el-icon><Connection /></el-icon>
        <span>线索管理</span>
      </template>
      <el-menu-item index="/clue/list">线索列表</el-menu-item>
      <el-menu-item index="/clue/pool">线索池</el-menu-item>
    </el-sub-menu>

    <!-- 商机管理 -->
    <el-sub-menu index="/business">
      <template #title>
        <el-icon><Opportunity /></el-icon>
        <span>商机管理</span>
      </template>
      <el-menu-item index="/business/list">商机列表</el-menu-item>
      <el-menu-item index="/business/pool">公海池</el-menu-item>
    </el-sub-menu>

    <!-- 客户管理 -->
    <el-menu-item index="/customer">
      <el-icon><User /></el-icon>
      <span>客户管理</span>
    </el-menu-item>

    <!-- 资源管理 -->
    <el-sub-menu index="/resource">
      <template #title>
        <el-icon><Files /></el-icon>
        <span>资源管理</span>
      </template>
      <el-menu-item index="/resource/course">课程管理</el-menu-item>
      <el-menu-item index="/resource/activity">活动管理</el-menu-item>
    </el-sub-menu>

    <!-- 系统管理 -->
    <el-sub-menu index="/system">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/system/dept">部门管理</el-menu-item>
      <el-menu-item index="/system/role">角色管理</el-menu-item>
      <el-menu-item index="/system/user">用户管理</el-menu-item>
      <el-menu-item index="/system/log">系统日志</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import {
  House,
  Connection,
  Opportunity,
  User,
  Files,
  Setting,
} from "@element-plus/icons-vue";

const route = useRoute();

// 计算当前激活的菜单项
const activeMenu = computed(() => {
  const { path } = route;
  return path;
});
</script>

<style scoped>
.sidebar-menu {
  height: 100%;
  border-right: none;
}

.sidebar-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e8e8e8;
}

.sidebar-menu .el-sub-menu .el-menu-item {
  height: 40px;
  line-height: 40px;
  padding-left: 50px !important;
  background-color: #fafafa;
}

.sidebar-menu .el-menu-item:hover,
.sidebar-menu .el-sub-menu__title:hover {
  background-color: #e6f7ff !important;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #e6f7ff !important;
  color: #1890ff !important;
  border-right: 3px solid #1890ff;
}

.el-icon {
  margin-right: 8px;
}
</style>
